<!--图文分类组件-->
<template>
  <section
      v-if="list.length >0"
      class="graphic-classify-comp"
      :style="{ 'margin-top': top }"
  >
    <section
        class="menu-container"
        :style="{marginRight:spacing,marginLeft:spacing,paddingTop:paddingTopBottom,paddingBottom:paddingTopBottom}"
    >
      <section
          v-for="(item,index) in list"
          :key="index"
          class="menu-item"
          :style="{width:showType||'25%'}"

      >
        <section class="img-box">
          <van-image :src="setImgPath(item.imgId,item.imgUrl)" :fit="imgType" :style="{width:imageWidth, height:imageHeight}">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/default-placeholder.png" alt="">
            </template>
          </van-image>
        </section>
        <section class="menu-title etc">{{ getMapping(item,'classifyName')}}</section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../mixins'
import mixin from './mixins'

export default {
  name: 'GraphicClassifyComp',
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      list: [],
      defaultList: [
        {
          classifyName: '菜单1',
          imgId:'',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          classifyName: '菜单2',
          imgId:'',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          classifyName: '菜单3',
          imgId:'',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          classifyName: '菜单4',
          imgId:'',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        },
        {
          classifyName: '菜单5',
          imgId:'',
          imgUrl: '',
          linkType: '',
          linkAddress: ''
        }

      ]
    }
  },
  computed: {

    // 图片宽高
    imageWidth() {
      return this.px2rem(this.option.imageWidth || 70)
    },
    // 图片高
    imageHeight() {
      return this.px2rem(this.option.imageHeight || 74)
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result?.dataList?.data || []
    }

  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.graphic-classify-comp {
  margin: 0 auto;
  position: relative;
  width: rem(750);

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .menu-container {
    padding: rem(20) 0;
    min-height: rem(188);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: rem(16);
    background-color: #fff;

    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: rem(10);

      .img-box {

        .van-image {
          width: rem(70);
          height: rem(70);

          .van-image__error {
            > img {
              width: rem(40);
              height: rem(40);
            }
          }
        }
      }

      .menu-title {
        margin-top: rem(18);
        font-size: rem(28);
        text-align: center;
      }
    }
  }
}

</style>
